<template>
	<view style="position: relative;">
		<u-navbar title="维他希汀" :autoBack="false" :placeholder="true"></u-navbar>

		<view class="" :style="{position: 'relative'}">
			<view class="dian">
				<view :class="index == active ? 'li active':'li'" v-for="(item, index) in imgs" :key="index"></view>
			</view>
			<swiper autoplay="true" indicator-dots="false" indicator-active-color="#ffffff"
				style="height: 580rpx;position: relative;" @change="change" :indicator-dots="false">

				<swiper-item v-for="(item, index) in imgs" :key="index" v-if="item.image">
					<view class="swiper-text">
					</view>
					<view class="swiper-play" @click="goto(item.jumpurl)">立即购买</view>
					<image :src="item.image" style="width: 100%;height: 100%;" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>

		<!-- 排行榜 -->
		<view class="">
			<view class="box-header">
				<view class="box-header-left">排行榜</view>
			</view>

			<view class="fl-box fl-one">
				<view class="box-two">
					<view class="top" @click="toUrl('/subPages/ranking/ranking')" style="background-color:rgb(51,61,96) ;">
						<view class="left">畅销榜</view>
						<view class="right" style="line-height: 0"><img src="/static/images/index/right_jt.png" alt=""
								style="width: 24rpx;height: 24rpx;"></view>
					</view>
					<view class="item">
						<view class="li">
							<view class="number" v-for="(item,index) in cats2" @click="goto(item.id)" :key="item.id" v-if="index<3">
								<view class="number">{{index+1}}</view>
								<view style="margin: 0 30rpx;"><img style="width: 100rpx;height: 100rpx;" :src="item.goodsImage" alt="">
								</view>
								<view class="body">
									<view>{{item.goodsName}}</view>
									<view style="color: #bbbbbd;font-size: 20rpx;margin-top: 10rpx;font-weight: 300;">
										{{item.cont1 ? item.cont1 : ''}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="box-two">
					<view class="top" @click="toUrl('/subPages/ranking/ranking')" style="background-color: rgb(86,89,104);">
						<view class="left">热销榜</view>
						<view class="right" style="line-height: 0"><img src="/static/images/index/right_jt.png" alt=""
								style="width: 30rpx;height: 30rpx;"></view>
					</view>
					<view class="item">
						<view class="li">
							<view class="number" v-for="(item,index) in cate6" @click="goto(item.id)" :key="item.id" v-if="index<3">
								<view class="number">{{index+1}}</view>
								<view><img style="width: 100rpx;height: 100rpx;" :src="item.thum_image" alt=""></view>
								<view class="body">
									<view>{{item.name}}</view>
									<view style="color: #bbbbbd;font-size: 20rpx;margin-top: 10rpx;font-weight: 300;">
										{{item.cont1 ? item.cont1 : ''}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 当季主推 -->
		<view class="">
			<view class="box-header">
				<view class="box-header-left">当季主推</view>
			</view>

			<view class="new-list">
				<view class="box" v-for="item,index in zhutuigood" :key="index">
					<view class="top"><img class="goods-img" :src="item.goodsImage" alt=""></view>
					<view class="bottom">
						<view class="h">{{item.h}}</view>
						<view class="t">{{item.goodsName}}</view>
						<view class="btn" :style="{backgroundColor:item.background}">
							<view class="left" style="font-size: 32rpx;">￥{{getNumber(item.price)}} <text
									style="font-size: 22rpx;margin-left:4rpx"> 起</text></view>
							<view class="right" @click="goto(item.id)">立即购买</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="public-list fl-box">
			<view class="item" v-for="(item,index) in cate5" @click="goto(item.id)" :key="index">
				<img class="img" :src="item.thum_image" alt="">

				<view class="bottom">
					<view style="color:rgb(246,135,3);font-size: 22rpx;margin-bottom: 15rpx;">新品上市</view>
					<view style="font-size: 25rpx;margin-bottom: 40rpx;">
						{{item.name}}
					</view>
					<view style="color: rgb(0,0,0);font-size: 24rpx;">
						<text style="font-size: 28rpx;margin-right: 10rpx;">￥{{getNumber(item.price)}} <text
								style="font-size: 22rpx;margin-left:4rpx"> 起</text></text>
					</view>
				</view>
			</view>
		</view>


	</view>

</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: '',
				number: '',
				active: 0,
				navs: [],
				imgs: [],
				ms: [],
				wapFloatData: '',
				templateData: [],
				uid: 0,
				height: 0,
				zhutuigood: [],
				opation: 0,
				cats2: [],
				cate5: [],
				threshold: 30,
				homeImg: ''
			}

		},
		onPageScroll(e) {
			if (e.scrollTop <= this.threshold) {
				this.opation = 0;
			} else {
				const opacity = (e.scrollTop - this.threshold) / this.threshold;
				this.opation = opacity < 1 ? opacity : 1;
			}
		},
		async onShow() {},
		async onLoad() {
			try {
				let res = await this.$api.getbanner({})
				this.imgs = res.data;
				let goodsList = await this.$api.getGoodsList()
				this.cats2 = goodsList.data.sort(this.compare('sales_num')).reverse();
				let shop = await this.$api.getMainly({})
				this.zhutuigood = shop.data;

				// 获取距上
				const barTop = wx.getSystemSetting().statusBarHeight
				// 获取胶囊按钮位置信息
				const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
				// 获取导航栏高度
				const barHeight = menuButtonInfo.height + (menuButtonInfo.top - barTop) * 2
				const height = (barTop) * 2
				this.statusBarHeight = menuButtonInfo.height + 'px'
				this.height = (menuButtonInfo.top) + 'px'
			} catch (err) {
				console.log(err);
			}

		},
		mounted() {},
		methods: {
			getNumber(number) {
				return parseInt(number)
			},
			toUrl(item) {
				uni.navigateTo({
					url: item
				})
			},
			goto(id) {
				uni.navigateTo({
					url: '/subPages/goodDetails/goodDetails?id=' + id
				})
			},
			change(e) {
				this.active = e.detail.current
			},
			compare(property) {
				return function(obj1, obj2) {
					var value1 = obj1[property];
					var value2 = obj2[property];
					return value1 - value2; // 升序
				}
			}

		}
	}
</script>

<style lang="scss">
	.swiper-play {
		position: absolute;
		left: 40rpx;
		bottom: 50rpx;
		font-size: 22rpx;
		text-align: center;
		border-radius: 100rpx;
		width: 170rpx;
		line-height: 55rpx;
		color: #fff;
		background-color: rgba(0, 0, 0, .85);
	}

	.swiper-text {
		width: 400rpx;
		position: absolute;
		left: 40rpx;
		top: 180rpx;
	}

	.text-nav {
		padding: 20rpx 0;
		display: flex;
		flex-wrap: wrap;
	}

	.dian {
		position: absolute;
		right: 40rpx;
		bottom: 60rpx;
		z-index: 33;
		display: flex;

		.li {
			width: 18rpx;
			height: 18rpx;
			background-color: rgba(62, 62, 62, .6);
			border-radius: 50%;
			margin-right: 10rpx;

			&.active {
				background-color: #fff;
			}

		}
	}

	.fl-one {
		padding: 0 20rpx;
	}

	.box-two {
		background-color: #fff;
		margin-right: 20rpx;

		.top {
			width: 450rpx;
			border-radius: 12rpx;
			background-color: #000;
			padding: 15rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
			z-index: 3;

			.left {
				color: #fff;
				font-size: 24rpx;
			}
		}

		.item {
			background-color: #fff;
			position: relative;
			border-radius: 12rpx;


			.li {
				padding: 0 26rpx;

				.number {
					display: flex;
					align-items: center;
					font-size: 40rpx;
					font-weight: 900;

					.body {
						font-size: 24rpx;
					}
				}

				.number:nth-of-type(1) .number {
					color: #171615;
				}

				.number:nth-of-type(2) .number {
					color: rgb(187, 187, 189);
				}

				.number:nth-of-type(3) .number {
					color: rgb(205, 160, 88);
				}
			}
		}
	}


	.public-list {
		padding: 0 20rpx 30rpx;
		margin-top: 20rpx;

		.item {
			border-radius: 12rpx;
			background-color: #fff;
			margin-right: 20rpx;

			.img {
				width: 340rpx;
				height: 340rpx;
			}

			.bottom {
				padding: 0 30rpx 40rpx;
			}
		}
	}

	.uni-popup__wrapper-box {
		text-align: center;
		overflow: initial !important;
		background: none !important;
		vertical-align: middle;
		background: none;
	}

	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.item-fx {
		display: flex;
		overflow: scroll;

		.item {
			position: relative;
			margin-right: 30rpx;
		}
	}

	.new-list {
		padding: 0 20rpx;
		display: flex;
		overflow: scroll;

		.box {
			margin-right: 20rpx;
			position: relative;

			.top {
				.goods-img {
					display: block;
					width: 640rpx;
					height: 800rpx;
				}
			}

			.tp {
				border-radius: 12rpx;
			}

			.bottom {

				border-bottom-left-radius: 12rpx;
				border-bottom-right-radius: 12rpx;
				padding: 20rpx;
				position: absolute;
				bottom: 0;
				width: 100%;
				box-sizing: border-box;
				padding-bottom: 45rpx;

				.h {
					font-size: 56rpx;
					color: #fff;
					font-weight: 500;
				}

				.t {
					color: rgba(255, 255, 255, .65);
					font-size: 32rpx;
				}

				.btn {
					display: flex;
					margin-top: 65rpx;
					justify-content: space-between;
					align-items: center;

					.left {

						font-size: 32rpx;
						color: #fff;
					}

					.right {
						padding: 12rpx 30rpx;
						background-color: #fff;
						border-radius: 50rpx;
						color: #3b3e40;
						font-size: 22rpx;
					}
				}
			}
		}

	}

	.box-header {
		font-size: 36rpx;
		padding: 0 20rpx;
		display: flex;
		margin-top: 30rpx;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.box-header-left {
		font-size: 32rpx;
		font-weight: 700;
		color: rgba(0, 0, 0, .85);

	}


	.fl-box {
		display: flex;
		overflow: scroll;
		flex-wrap: scroll;
		align-items: flex-start;
		justify-content: space-between;
	}
</style>